//LiuZh 2017-05-17
import React, {Component} from 'react';
import {
    View,
    StyleSheet,
    Text,
    Image,
    TouchableOpacity,
    Dimensions,
    Modal,
    TouchableHighlight
} from 'react-native';
import Color from '../constant/color';

const backImgSrc = require('../../img/back_white.png');
const winWidth = Dimensions.get("window").width;

//设置属性工具栏，左边为取消 ，右边为完成
export default class ToolbarSetProperty extends Component {
    constructor(props) {
        super(props);
        this.pressBack.bind(this);

    }

    render() {
        let bgColor = this.props.backgroundColor;
        let disable = this.props.oldValue === this.props.newValue || (!this.props.oldValue && !this.props.newValue);
        return (
            <View style={[styles.box, bgColor ? {backgroundColor: bgColor, borderColor: bgColor} : {}]}>
                <TouchableOpacity
                    onPress={this.props.goBack ? this.props.goBack : this.pressBack}
                    style={{
                        top: 0,
                        left: 0,
                        width: 50,
                        height: 50,
                        flexDirection: "row",
                        justifyContent: 'flex-start',
                        alignItems: 'center',
                        position: 'absolute',
                    }}>
                    <Text style={styles.text}>取消</Text>
                </TouchableOpacity>
                <View style={{flexDirection: "row", justifyContent: "center"}}>
                    <Text style={[styles.text, this.props.textColor ? {color: this.props.textColor} : {}]}>{this.props.text}</Text>
                </View>
                <TouchableOpacity disabled={disable}
                                  onPress={() => {
                                      this.props.complete(this.props.newValue);
                                      this.pressBack()
                                  }}
                                  style={{
                                      top: 0,
                                      right: 0,
                                      width: 50,
                                      height: 50,
                                      flexDirection: "row",
                                      position: 'absolute',
                                      alignItems: 'center',
                                      justifyContent: 'flex-start',
                                  }}>
                    <Text style={[styles.text, {color: disable ? Color.TEXT_BTN_DISABLE : Color.TEXT_BTN}]}>完成</Text>
                </TouchableOpacity>

            </View>
        )
    }

    pressBack = () => {
        this.props.navigation.goBack();
    }
}

const styles = StyleSheet.create({
    box: {
        height: 50,
        marginTop: 0,
        alignItems: 'center',
        flexDirection: 'row',
        justifyContent: 'center',
        borderColor: '#DDDDDD',
        backgroundColor: '#38373d',
        borderBottomWidth: 0.5,
        //	flex:1,
    },
    back: {
        height: 20,
        width: 20,

    },
    text: {
        color: "#ffffff",
        alignSelf: "center",
    }
});